<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- Vue分页组件 -->
<script type="x-template/text" id="pagination-template">
    <div class="pagination" v-if="pages > 1">

        <%--
            1. 如果 总页数只有 1页， 则不显示分页效果
            2. 如果 总页数 <= 5页， 则 显示 1 ~ 总页数
            3. 如果 总页数 > 5 页， 当前页面 小于等于 3 , 则 显示  1 ~ 5 页
            4. 如果 总页数 > 5 页， 且 当前页 大于等于 总页数 - 2 ， 则显示 最后 5页
            5. 其他 情况 均显示   当前页 - 2  ~ 当前页 + 2
        --%>

        <%--  如果当前页 大于 1 ， 则显示 上一页      --%>
        <a class="left" v-if="page > 1"></a>

        <%--   如果 总页数 <= 5页， 则 显示 1 ~ 总页数         --%>
        <template v-if="pages <= 5">
            <a v-for="n in pages" @click="$emit('click-page', n)"  :class="{act: page == n }" >{{n}}</a>
        </template>

        <%--   如果 总页数 > 5 页， 当前页面 小于等于 3 , 则 显示  1 ~ 5 页       --%>
        <template v-else-if="page <= 3">
            <a v-for="n in 5" @click="$emit('click-page', n)"  :class="{act: page == n }" >{{n}}</a>
        </template>

        <%--       如果 总页数 > 5 页， 且 当前页 大于等于 总页数 - 2 ， 则显示 最后 5页 --%>
        <template v-else-if="page >= pages - 2">
            <a v-for="n in 5" @click="$emit('click-page', pages - 5 + n)"  :class="{act: page == pages - 5 + n }" >{{pages - 5 + n}}</a>
        </template>

        <template v-else>
            <a v-for="n in 5" @click="$emit('click-page', page - 3 + n)"  :class="{act: page == page - 3 + n }" >{{page - 3 + n }}</a>
        </template>
        <%--   如果当前页 < 总页数， 则显示 下一页   --%>
        <a class="right" v-if="page < pages"></a>
    </div>
</script>

<script>
    const pagination = {
        model: {
            prop: "page",
            event: "click-page",
        },
        props: {
            page: {
                type:Number,
                required: false,
                default: 1
            },
            pages: {
                type: Number,
                required: true,
            }
        },
        // 定义模板
        template: "#pagination-template" ,
    }
</script>
